<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue包 -->
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="浪起来" v-on:click="lang"/>
			<input type="button" value="停止" @click="stop"/>
			<h4>{{msg}}</h4>
		</div>
		<script type="text/javascript">
			//在vm实例中如果想要获取data中的数据，或者想要调用方法，必须通过this,
			//this标示new出来的实例对象
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'猥琐发育别浪，稳住我们能赢',
					intervalID:null//定时器ID
				},
				methods:{
					lang(){
						if(this.intervalID != null) return;
						this.intervalID = setInterval(()=>{ //箭头函数，内部this指向外部this，解决this指向问题
							var start = this.msg.substring(0,1);
							var end = this.msg.substring(1);
							this.msg = end + start;
						},70);
						
	//注意：vm实例会监听自己身上data中所有数据的改变，只要数据以变化，就会自动更新数据到页面上去
	//好处：只需要关注数据，不需要关注重新渲染到页面
					},
					stop(){
						clearInterval(this.intervalID);
						this.intervalID = null;
					}
				}
			});
			
			/* 分析 */
			//1、给浪起来绑定点击事件 v-on
			//2、拿到msg字符串，然后调用substring进行截取，把第一个放到最后即可
			//3、为了实现自动截取，需要定义一个定时器
		</script>
	</body>
</html>
